<template>
	<view class="">
		<view class="header">
		</view>
		<view class="main">
			<view class="circleBox">
				<u-icon name="clock-fill" color="#ff9a57" size="80"></u-icon>
			</view>
			<view class="statusTitle">支付未完成</view>
			<view class="line"></view>
			<view class="failText">支付失败了，重新支付</view>
		</view>
		<view class="bottomBox">
			<u-button text="返回首页" @click="goPage" color="#02409a"></u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
const goPage = () => {
	uni.switchTab({
		url: '/pages/home/home'
	});
};
</script>

<style lang="less" scoped>
.header {
	height: 300rpx;
	background: linear-gradient(180deg, #02409a 0%, #02409a 82%, rgba(2, 64, 154, 0.1) 100%);
}
.main {
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: -60rpx;
	.circleBox {
		width: 120rpx;
		height: 120rpx;
		background: #f4f8fb;
		border-radius: 50%;
		border: 30rpx solid #f4f8fb;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: -90rpx;
	}
	.statusTitle {
		font-size: 44rpx;
		font-weight: 800;
		color: #303133;
		margin-top: 70rpx;
	}
	.line {
		width: 100%;
		height: 1rpx;
		border-bottom: 1rpx dashed #f3f3f3;
		margin: 90rpx 0;
		position: relative;
		&:before {
			content: '';
			position: absolute;
			left: -15rpx;
			bottom: -16rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #f4f8fb;
		}
		&::after {
			content: '';
			position: absolute;
			right: -15rpx;
			bottom: -16rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #f4f8fb;
		}
	}
}
.failText {
	font-size: 28rpx;
	color: #a5b5c0;
	margin: 32rpx 0;
}
</style>
